enum Player{
    X='x',
    O='o'
}

// 判赢数组
let winsArr = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],  // 横
  [0, 3, 6], [1, 4, 7], [2, 5, 8],  // 竖
  [0, 4, 8], [2, 4, 6]	            // 斜
]

let cells = document.querySelectorAll('.cell')
let currentPlayer :Player
let gameBoard = document.querySelector('#bord')
let message = document.querySelector('#message') as HTMLDivElement
let winner = document.querySelector('#winner') as HTMLParagraphElement
let restart = document.querySelector('#restart') as HTMLButtonElement
let steps :number



restart.addEventListener('click',startGame)

startGame()

function startGame(){
        message.style.display = 'none'
        steps=0
    
        currentPlayer = Player.X
    
        gameBoard.classList.remove(Player.X,Player.O)
        gameBoard.classList.add(Player.X)
    
    
        cells.forEach(function(item){
            let cell = item as HTMLDivElement
            cell.classList.remove(Player.X,Player.O)
            cell.removeEventListener('click',clickCell)
            cell.addEventListener('click',clickCell,{once:true})
    
        })
        
}

// cells.forEach(function(item){
//     let cell = item as HTMLDivElement
//     //console.log(item);
//     cell.addEventListener('click',clickCell,{once:true})
    
// })
function clickCell(event:MouseEvent){
    //console.log('click',event.target);
    let target = event.target as HTMLDivElement
    target.classList.add(currentPlayer)
    steps++
    //调用判赢函数
    let isWin = checkWin(currentPlayer)
    if(isWin){
        //console.log('该玩家获胜啦！',currentPlayer);
        message.style.display = 'block'
        winner.innerText = currentPlayer + ' 赢了'
        return       
    }
    if(steps === 9){
        message.style.display = 'block'
        winner.innerText = '平局'
        return
    }
    currentPlayer = currentPlayer === Player.X?Player.O:Player.X
    //处理下一步提示
    gameBoard.classList.remove(Player.X,Player.O)
    gameBoard.classList.add(currentPlayer)

}
//封装判赢函数
function checkWin(player:Player){
     /*
    实现判赢函数：

    1 使用 some 方法遍历数组，并使用 some 方法的返回值作为判赢函数的返回结果。
    2 在 some 方法的回调函数中，获取到每种获胜情况对应的 3 个单元格元素。
    3 判断这 3 个单元格元素是否同时包含当前玩家的类名。
    4 如果包含（玩家获胜），就在回调函数中返回 true 停止循环；
      否则，返回 false，继续下一次循环。
  */

      return winsArr.some(function (item) {
    // 获取到每种获胜情况对应的 3 个单元格元素
    // 2.1 先拿到每种获胜情况的三个索引
    // console.log(item)
    let cellIndex1 = item[0]
    let cellIndex2 = item[1]
    let cellIndex3 = item[2]
    // console.log(cellIndex1, cellIndex2, cellIndex3)
    // 2.2 通过这三个索引从cells中获取到对应的单元格元素
    // let cell1 = cells[cellIndex1]
    // let cell2 = cells[cellIndex2]
    // let cell3 = cells[cellIndex3]
    //console.log(cell1, cell2, cell3)

    if(
        // cells[cellIndex1].classList.contains(player) &&
        // cells[cellIndex2].classList.contains(player) &&
        // cells[cellIndex3].classList.contains(player) 
        hasClass(cells[cellIndex1],player) &&
        hasClass(cells[cellIndex2],player) &&
        hasClass(cells[cellIndex3],player) 
    ){
        return true
    }
    return false
  })

}
function hasClass(el:Element,name:string){
    return el.classList.contains(name)
}